<template>
	<div class="update">
		<div class="div1">
			<aside>
				<i class="el-icon-s-data"><span>&nbsp;热度图片-{{act}}</span></i>
				<router-link to="/admin/hotphoto">返回列表</router-link>
				<el-button @click="update()" type="text" style="font-size: 16px;"><i class="el-icon-folder-checked">&nbsp;保存...</i></el-button>
				<p>类型定义:&nbsp;1=轮播图&nbsp;2=广告图&nbsp;3=新品图</p>
			</aside>
			<hr>
		</div>
		<div class="div2">
			<aside>
				<el-upload class="avatar-uploader" :multipe="false" :show-file-list="true" :auto-upload="false"
				:before-upload="beforeAvatarUpload" :file-list="fileList" :on-change="handleChange"
				action="uploadAction" list-type="picture" accept="image/jpg,image/jpeg">
				<img v-if="imageUrl" :src="imageUrl" class="avatar">
				<i v-else class="el-icon-plus avatar-uploader-icon"></i>
				</el-upload>
			</aside>
			<el-form ref="user" :model="user" label-width="250px">
				<el-form-item label="类型-整数">
					<el-input v-model="user.type" style="width: 25vw;"></el-input>
				</el-form-item>
				<el-form-item label="优先级-整数">
					<el-input v-model="user.hot"></el-input>
				</el-form-item>
				<el-form-item label="描述">
					<el-input type="textarea" placeholder="请输入信息" v-model="user.memo"></el-input>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
export default {
	name:'UpdateHotPhoto',
	data(){
		return{
			act:'添加',
			imageUrl:"",
			fileList:[],
			user:{}
		}
	},
	methods:{
		handleChange: function(file, fileList) {
		                 this.fileList = fileList;
		            },
		beforeAvatarUpload(file) {
		                const isJPG = file.type === 'image/jpeg';
		                const isLt2M = file.size / 1024 / 512;
		
		                if (!isJPG) {
		                    this.$message.error('上传图片只能是 JPG 格式!');
		                }
		                if (!isLt2M) {
		                    this.$message.error('上传图片大小不能超过 0.5MB!');
		                }
		                return isJPG && isLt2M;
		},
		update(){
			let fd =new FormData();
			if(this.$route.query.id>0){
				fd.append("id",this.user.id);
			}
			fd.append("type",this.user.type);
			fd.append("hot",this.user.hot);
			fd.append("memo",this.user.memo);
			if(this.fileList.length>0 && this.fileList[0].raw !=null){
				fd.append("pic",this.fileList[0].raw);
			}
			this.$postf("/api/adm/hot/add",fd).then((resp)=>{
				this.user =resp.data.data;
				console.log(this.user);
				
				this.imageUrl =`${this.$ip}/api/public/showimg/${resp.data.data.picture}`;
				
				this.$message({
					message:'修改成功',
					type:'success'
				})
			})
		}
	},
	mounted(){
		console.log(this.$route.query.id);
		console.log(this.$route.query.act);
		if(this.$route.query.id>0){
			this.act =this.$route.query.act;
			this.$get("/api/adm/hot/findById/"+this.$route.query.id).then((resp)=>{
			this.user =resp.data.data;
			
			this.imageUrl =`http://127.0.0.1:80/api/public/showimg/${resp.data.data.picture}`;
			console.log(this.user);
			})
		}
	}
}
</script>

<style scoped>
.update{
	width: 78%;
	margin: 0 auto;
}
.update .div1 aside{
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.update .div1 aside a{
	color: #5fb8ff;
}
.avatar-uploader .el-upload {
    border: 1px dashed #c3c3c3;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }
  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }
  .avatar-uploader-icon {
    font-size: 30px;
    color: #8c939d;
    width: 450px;
    height: 200px;
    line-height: 200px;
  }
  .avatar {
    width: 200px;
    height: 200px;
    display: block;
  }
.update .div2{
	margin-top: 30px;
	display: flex;
}
.update .div2 aside{
	width: 30%;
	height: 240px;
	border: 1px dashed #c3c3c3;
}
.update .div2 aside img{
	width: 100%;
	height: 100%;
}
</style>
